Селектори параметрів

Internet Explorer/Internet Explorer

Netscape/Netscape

Opera/Opera

Safari/Safari

Firefox/Firefox

6.0

7.0

8.0

8.0

9.0

8.0

9.2

9.5

1.3

2.0

3.1

1.5

2.0

3.0

Ні

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Опис

Багато тегів розрізняються по своїй дії залежно від того, які в них використовуються параметри. Наприклад, тег <INPUT> може створювати кнопку, текстове поле і інші елементи форми усього лише за рахунок зміни значення параметра type. При цьому додавання правил стилю до селектора INPUT застосує стиль одночасно до усіх створених за допомогою цього тега елементів. Щоб гнучко управляти стилем подібних елементів, в CSS введені селекторы параметрів (звані також селекторы атрибутів). Вони дозволяють встановити стиль тега по присутності певного параметра або його значення.

Простий селектор параметра

Опис

Встановлює стиль для елементу, якщо заданий специфічний параметр тега. Його значення в даному випадку не важливе.

Синтаксис

[параметр] { Опис правил стилю }E[параметр] { Опис правил стилю }

Стиль застосовується до тих тегів, усередині яких доданий вказаний параметр. Пропуск між ім'ям селектора і квадратними дужками не допускається.

Приклад 1

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">
    <title>Селекторы параметрів</title>
    <style type="text/css">
      Q {
        font - style: italic; /* Курсивне зображення */
        quotes: "\00AB" "\00BB"; /* Міняємо вид лапок в цитаті */
      }
      Q[title] {
        color: maroon; /* Колір тексту */
      }
    </style>
  </head>
  <body>
 
    <p>Продовжуючи відомий закон Мерфи, який свідчить : <q>Якщо неприємність 
      може статися, то вона обов'язково станеться</q>, можемо ввести своє спостереження: 
    <q title="Із законів Фергюссона-Мержевича">Після того, як веб-сторінка 
      буде коректно відображатися в одному браузері, з'ясується, 
      що вона неправильно показується в іншому</q>.</p>
 
  </body>
</html>

Результат прикладу показаний на мал. 1.

Мал. 1. Зміна стилю елементу залежно від застосування параметра title

У цьому прикладі міняється колір тексту усередині контейнера <Q>, коли до нього додається параметр title. Зверніть увагу, що для селектора Q[title] немає нужди повторювати стильові властивості, оскільки вони наслідують від селектора Q. Браузер IE7 не додає лапки до тексту, тільки змінює його колір.

Параметр зі значенням

Опис

Встановлює стиль для елементу у тому випадку, якщо задано певне значення специфічного параметра.

Синтаксис

[параметр="значення"] { Опис правил стилю } E[параметр="значення"] { Опис правил стилю }

У першому випадку стиль застосовується до усіх тегів, які містять вказане значення параметра. А в другому - тільки до певних селекторів.